import React, { FunctionComponent } from 'react';
import { Col, Divider, Form, Row, Tabs } from 'antd';
import {
  createRespResult,
  KfBizQuickFormProps,
  KfDatePicker,
  KfDateStringPicker,
  KfFloatingContextProps,
  KfInput,
  KfInputNumber,
  KfQuickForm,
  KfRichEditor,
  KfTextArea,
} from 'kf-web-library';
import * as API from '@/services';

const FormItem = Form.Item;

type DataFormProps = {} & KfFloatingContextProps;
const QuickForm: FunctionComponent<DataFormProps> = (props) => {
  const { ...rest } = props;
  return (
    <KfQuickForm
      formType={'modify'}
      formProps={{
        layout: 'vertical',
      }}
      queryRequest={{
        modify: true,
        create: true,
      }}
      defaultQueryRequest={() => API.querySiteAboutInfo()}
      submitRequest={{
        modify: (formValues) => {
          return API.patchSiteAboutInfo({
            abstractContent: formValues.abstractContent,
            content: formValues.content,
            establishYear: formValues.establishYear,
            journalNum: formValues.journalNum,
            journalCnNum: formValues.journalCnNum,
            journalEnNum: formValues.journalEnNum,
          });
        },
      }}
      {...rest}
    >
      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
        <Col span={6}>
          <FormItem name={nameof.split<API.SiteAboutInfo>((x) => x.establishYear)} label="期刊社成立年" rules={[{ required: true }]}>
            <KfDateStringPicker format={"YYYY"} datePicker={{picker: 'year'}} />
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem name={nameof.split<API.SiteAboutInfo>((x) => x.journalNum)} label="期刊数量" rules={[{ required: true }]}>
            <KfInputNumber style={{ width: '100%' }} />
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem name={nameof.split<API.SiteAboutInfo>((x) => x.journalCnNum)} label="中文期刊数量" rules={[{ required: true }]}>
            <KfInputNumber style={{ width: '100%' }} />
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem name={nameof.split<API.SiteAboutInfo>((x) => x.journalEnNum)} label="英文期刊数量" rules={[{ required: true }]}>
            <KfInputNumber style={{ width: '100%' }} />
          </FormItem>
        </Col>
      </Row>

      <Tabs
        defaultActiveKey="cn"
        items={[
          {
            label: '中文',
            key: 'cn',
            forceRender: true,
            children: (
              <>
                <FormItem
                  name={nameof.split<API.SiteAboutInfo>((x) => x.abstractContent.textCn)}
                  label="中文标题"
                  layout={'horizontal'}
                  rules={[{ required: true }]}
                >
                  <KfTextArea />
                </FormItem>
                <FormItem name={nameof.split<API.SiteAboutInfo>((x) => x.content.textCn)} label="中文内容" layout={'horizontal'} rules={[{ required: true }]}>
                  <KfRichEditor />
                </FormItem>
              </>
            ),
          },
          {
            label: '英文',
            key: 'en',
            forceRender: true,
            children: (
              <>
                <FormItem
                  name={nameof.split<API.SiteAboutInfo>((x) => x.abstractContent.textEn)}
                  label="英文标题"
                  layout={'horizontal'}
                  rules={[{ required: false }]}
                >
                  <KfTextArea />
                </FormItem>
                <FormItem name={nameof.split<API.SiteAboutInfo>((x) => x.content.textEn)} label="英文内容" layout={'horizontal'} rules={[{ required: false }]}>
                  <KfRichEditor />
                </FormItem>
              </>
            ),
          },
        ]}
      />
    </KfQuickForm>
  );
};
export default QuickForm;
